<template>
	<view class="first-wrap">
		<view class="form">
			<view class="title-text">泉州风光</view>
			<swiper :indicator-dots="true" :autoplay="true" :interval="5000" :duration="500"
				style="height: 400rpx;">
				<swiper-item>
					<image style="height: 100%;width: 100%;" src="/static/city1.png"></image>
				</swiper-item>
				<swiper-item>
					<image style="height: 100%;width: 100%;" src="/static/city2.jpg"></image>
				</swiper-item>
				<swiper-item>
					<image style="height: 100%;width: 100%;" src="/static/city3.jpg"></image>
				</swiper-item>
				<swiper-item>
					<image style="height: 100%;width: 100%;" src="/static/city4.jpg"></image>
				</swiper-item>
				<swiper-item>
					<image style="height: 100%;width: 100%;" src="/static/city5.jpg"></image>
				</swiper-item>
			</swiper>
		</view>

		<view class="form">
			<view class="title-text">泉州介绍</view>
			<view class="second-text">海上丝绸之路起点 - 泉州</view>
			<view class="main-text">历史文化：泉州是国务院首批公布的24个历史文化名城之一，是古代“海上丝绸之路”起点，宋元时期被誉为“东方第一大港”。</view>
			<view class="main-text">著名景点：清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等。</view>
			<rich-text class="main-text" :nodes="htmlContent"></rich-text>
		</view>

		<view class="form">
			<view class="title-text">探索进度</view>
			<view class="main-text">当前进度：50%</view>
			<progress style="padding: 10rpx;" :percent="50" show-info stroke-width="3" />
		</view>

		<view class="form">
			<view class="title-text">选择城市</view>
			<view class="smart-flex smart-row">
				<view class="main-text">当前选择：</view>
				<picker class="main-text" mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex"
					:range="multiArray">
					<view>
						{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
					</view>
				</picker>
			</view>
		</view>

		<view class="form">
			<view class="title-text">泉州宣传</view>
			<video style="height: 400rpx;width: 100%;" src="/static/city-video.mp4" controls autoplay="true" loop="true" muted="true"></video>
		
		</view>

		<view class="form" >
			<view class="title-text">偏好设置</view>
			<view class="prefence" >
				<view style="margin-right: 20rpx">出行方式：</view>
				<radio-group>
					<label style="margin-right: 20rpx">
						<radio/><text>公交</text>
					</label>
					<label style="margin-right: 20rpx">
						<radio/><text>自驾</text>
					</label>
					<label>
						<radio/><text>步行</text>
					</label>
				</radio-group>
			</view>
			<view class="prefence">
				<view style="margin-right: 20rpx">显示推荐景点</view>
				<switch name="switch" />
			</view>
			<view >
				<view style="margin-right: 20rpx">探索半径</view>
				<slider value="50"  show-value></slider>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				htmlContent: `
        <p>特色文化：拥有
		<a href="https://www.ihchina.cn/nanyin.html" style="color: #007AFF; text-decoration: underline;">
		南音
		</a >
		、
		<a href="https://www.ihchina.cn/project_details/13429" style="color: #007AFF; text-decoration: underline;">
		木偶戏
		</a >
		和
		<a href="https://www.ihchina.cn/project_details/14684.html" style="color: #007AFF; text-decoration: underline;">
		闽南建筑
		</a >
		等丰富的非物质文化遗产
        </p >
      `,
				title: 'picker',
				index: 0,
				multiArray: [
					['中国'],
					['福建'],
					['泉州']
				],
				multiIndex: [0, 0, 0],
			}
		},
		methods: {


		}
	}
</script>

<style>
	.first-wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx 30rpx;
		height: 100vh;
		background-color: aliceblue;
	}

	.form {
		display: flex;
		flex-direction: column;
		width:90%; 
		padding: 30rpx 30rpx;
		background-color: white;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}
	
	.title-text{
		padding: 10rpx;
		font-weight: bolder; 
		font-size: 60rpx;
	}
	
	.second-text{
		padding: 10rpx;
		font-weight: bolder; 
		font-size: 50rpx;
	}
	
	.main-text{
		padding: 10rpx;
		font-weight: normal;
		font-size: 40rpx;
	}

	.uni-picker-tips {
		font-size: 12px;
		color: #666;
		margin-bottom: 15px;
		padding: 0 15px;
		/* text-align: right; */
	}
	
	.mp4.wrap{
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}
	
	.prefence{
		display: flex;
		flex-direction: row;
		border-bottom: 2rpx solid #d8d8d8;
		padding: 30rpx 10rpx;
	}
</style>